<template>
	<view class="uni_box home">
		<navbar title='支付费用'>
		</navbar>
		<view class="content">
			<view class="fone">
				<view class="fhead" v-if="newfrom.insuranceist>=1">
					<image class="baobg" src="@/pages_admin/static/baobg.png" />
					<view class="baoitem">
						<image class="bzhang" src="@/pages_admin/static/bzhang.png" />
						<text class="baoname">已加入 意外保障</text>
						<view class="yiview ml">
							<text class="bname">由众安保险承保</text>
							<image class="lvicon" src="@/pages_admin/static/lvicon.png" />
						</view>
					</view>
				</view>
				<view class="jifen">
					<text class="jiname">积分消耗明细</text>
					 <view class="zlist">
						<view class="zitem">
							<view class="zone">
								<text class="zhao zname">{{newfrom.title}}</text>
								<view class="sm" @click="zhaoshow=true">
									<image class="icon_ts" src="@/pages_admin/static/icon_ts.png" />
									<text class="smname">说明</text>
								</view>
								<text class="jinum">{{jiinfo.n1||0}}积分</text>
							</view>
							<text class="miao">单价:{{jiinfo.p}}积分/人天</text>
							<text class="miao">{{jiinfo.p}}积分/人天 x {{newfrom.people}}人 x {{gettian(work_time.xtime)}}天 = {{jitotal}}积分</text>

						</view>
						<view class="zitem" v-if="newfrom.insuranceist>=1">
							<view class="zone">
								<text class="zhao">零工保障服务包</text>
								<text class="jinum">{{jiinfo.n2||0}}积分</text>
							</view>
							<text class="miao">{{jiinfo.insuranceist}}积分/人天 x {{newfrom.people}}人 x {{gettian(work_time.xtime)}}天 = {{baototal}}积分</text>

						</view>
						<view class="zitem jiview" v-if="jiinfo.is_free==1">
							<view class="ztwo">
								<text class="zhao">首单免费</text>
								<text class="jinum">新人首单免费生效中</text>
							</view>
							<view class="rval">
								<text class="quanname">可抵扣{{ jiinfo.count }}积分</text>
								<image class="icon_xgs" src="@/pages_admin/static/icon_xgs.png" />
							</view>

						</view>
						<text class="xiaohao" v-if="jiinfo.is_free==1">消耗 0 积分</text>
						<text class="xiaohao" v-else>消耗 {{jiinfo.count}}积分</text>
					 </view>
				</view>
			</view>

			<view class="botview">
				<text class="dqian">当前余额{{user.integral||0}}积分</text>
				<view class="zhifu" @click="getfabu">
					立即支付
				</view>
			</view>
		</view>

		<!-- 招聘费说明 -->
		<u-popup  v-model="zhaoshow" mode="center" width="80%" ref="auth" :mask-close-able="false" :custom="true" :mask-click="false" @close="closezhao">
            <view class="popone">
                <image class="bg" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" mode="" />
                <view class="phonenav">
                    <view class="cha" @click="closezhao">
                        <image class="icon_gbcha" src="@/pages_admin/static/icon_gbcha.png" mode="" />
                    </view>
                    <text class="jiename">招聘费说明</text>
                    <view class="queli">
                        <view class="queitem">
                            <image class="icon_xz_s" src="@/pages_admin/static/icon_xz_s.png" mode="" />
                            <text>为了能够给用户提供更优质、更稳定的服务，并实现平台的长远发展，平台需要对招工订单收取一定的费用，感谢理解与支持!</text>
                        </view>
                        <view class="queitem">
                            <image class="icon_xz_s" src="@/pages_admin/static/icon_xz_s.png" mode="" />
                            <text>支付招聘费并发布招工后，若未招到人，平台将自动退回积分(您主动取消员工订单除外)</text>
                        </view>
                    </view>
                    <view class="dianbtn"  @click="closezhao">
                        <text class="bm">确认</text>
                    </view>
                    <!-- <text class="kaolv"  @click="closeorder">取消</text> -->
                </view>
                
            </view>
        </u-popup>

		<!-- 积分购买弹窗 -->
		<PayPop :jishow="jishow" v-if="jishow" @closejifen="jishow=false" :integral="user.integral" @paysucess="paysucess"></PayPop>
	</view>
</template>

<script>
import PayPop from '@/components/PayPop/PayPop'
	export default {
		components: {
			PayPop
		},
		data() {
			return {
				zhaoshow:false,
				jishow:false,
				newfrom:{},
				cost:{},
				payid:'',
				user:{
					integral:0
				},
				jitotal:0,
				baototal:0,
				jiinfo:{},
				work_time:{},
				isRequest:true
			}
		},
		onLoad(option) {
			if(option.newfrom){
				this.newfrom = JSON.parse(option.newfrom)
				this.work_time = JSON.parse(this.newfrom.work_time)
				console.log(this.work_time)
				// console.log(this.work_time)
				// console.log(this.newfrom )
				// this.cost = this.newfrom.cost
				// this.payid = this.newfrom.id
				// this.getjitotal()
				this.getjisuan();//计算积分
			}
			this.getuser()
			
		},
		onShow() {
		},
		methods: {
			async getjisuan(){
				let res = await this.$u.api.jisuan({
					people:this.newfrom.people,
					settlement:this.newfrom.settlement,
					price:this.newfrom.price,
					insuranceist:this.newfrom.insuranceist,
					timed:this.newfrom.timed,
					work_time:this.newfrom.work_time
				});
				this.jiinfo = res
				this.getjitotal()
				// console.log(res)
			},
			getjitotal(){
				this.jitotal = Number(this.jiinfo.p)*Number(this.newfrom.people)*Number(this.gettian(this.work_time.xtime))
				this.baototal = Number(this.jiinfo.insuranceist)*Number(this.newfrom.people)*Number(this.gettian(this.work_time.xtime))
				if(this.jiinfo.is_free == 1){
					//首单免费生效中

				}
				// console.log(this.jitotal)
			},
			closezhao(){
				this.zhaoshow = false
			},
			
			async getuser(){
				let res = await this.$u.api.user({
				});
				this.user = res.data
			},
			async getfabu(){
				if(this.jiinfo.status == 0){
					//积分不足
					this.jishow = true
				}else{
				    // 防止频繁点击操作
					if (!this.isRequest) {
						uni.showToast({
							title: '请勿频繁点击',
							icon: 'none',
							mask: true,
							duration: 1000,
						})
						return;
					} else {
						this.isRequest = false
						// 更新点击状态
						setTimeout(() => {
							this.isRequest = true
						}, 1500);
						let res = await this.$u.api.taskadd(this.newfrom);
						// console.log(res)
						this.navrouter("/pages_admin/twoPage/FabuSuccess");
					}
					
					
					
					// 
				}
				
				// this.navrouter("/pages_admin/twoPage/FabuSuccess");
			},
			throttle(func, delay) {
				let timer = null;
				return function() {
					if (!timer) {
						func.apply(this, arguments);
						timer = setTimeout(() => {
							timer = null;
						}, delay);
					}
				};
			},

			paysucess(){
				this.jishow = false
				this.getuser()
				this.getjisuan();//计算积分
			},
			gettian(e){
				return Math.ceil(e / 24);
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5f5f5;
	}
	.content{
		background-color: #F5f5f5;
		padding-bottom: 120rpx;
		.fone{
			margin: 30rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			padding-bottom: 30rpx;
			.fhead{
				position: relative;
				height: 80rpx;
				display: flex;
				align-items: center;
				// padding: 0 20rpx;
			}
			.baobg{
				position: absolute;
				width: 100%;
				height: 100%;
			}
			.baoitem{
				position: relative;
				width: 100%;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				.bzhang{
					margin-right: 6rpx;
					width: 24rpx;
					height: 24rpx;
				}
				.baoname{
					font-weight: 500;
					font-size: 24rpx;
					color: #111111;
				}
			}
			.yiview{
				display: flex;
				align-items: center;
				.bname{
					font-weight: 500;
					font-size: 24rpx;
					color: #16B925;
				}
				.lvicon{
					margin-left: 3rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}
	.jifen{
		margin: 30rpx 30rpx 0;
		display: flex;
		flex-direction: column;
		padding-top: 30rpx;
		.jiname{
			font-weight: 800;
			font-size: 32rpx;
			color: #111111;
			display: block;
			margin-bottom: 30rpx;
		}
		.zlist{
			display: flex;
			flex-direction: column;
			.zitem{
				background: #F8F8F8;
				border-radius: 20rpx;
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;
				.zone{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 10rpx;
					.zhao{
						font-weight: bold;
						font-size: 30rpx;
						color: #333333;
					}
					.zname{
						max-width: 68%;
						display: inline-block;
					}
					.sm{
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-left: 10rpx;
						.icon_ts{
							margin-right: 5rpx;
							width: 24rpx;
							height: 24rpx;
						}
						.smname{
							font-weight: 400;
							font-size: 24rpx;
							color: #FF773D;
						}
					}
					.jinum{
						margin-left: auto;
						font-weight: bold;
						font-size: 30rpx;
						color: #333333;
					}
					
				}
			}
			.jiview{
				border-radius: 20rpx;
				border: 1px solid #CCCCCC;
				background-color: transparent;
				display: flex;
				flex-direction: row;
			}
			.ztwo{
				display: flex;
				flex-direction: column;
				// align-items: center;
				.zhao{
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
				}
				.sm{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-left: 10rpx;
					.icon_ts{
						margin-right: 5rpx;
						width: 24rpx;
						height: 24rpx;
					}
					.smname{
						font-weight: 400;
						font-size: 24rpx;
						color: #FF773D;
					}
				}
				.jinum{
					margin-left: 0;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}
			.rval{
				display: flex;
				margin-left: auto;
				flex-direction: row;
				align-items: center;
				.quanname{
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
				}
				.icon_xgs{
					width: 20rpx;
					height: 20rpx;
					margin-left: 15rpx;
				}
			}
			.miao{
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				display: block;
				margin-top: 10rpx;
				
			}
		}
		.xiaohao{
			display: block;
			margin-left: auto;
			font-weight: 800;
			font-size: 32rpx;
			color: #FF773D;
		}
	}
	.botview{
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #FFFFFF;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.dqian{
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
		.zhifu{
			width: 100%;
			height: 90rpx;
			background: linear-gradient(90deg, #FF8F39, #FF4D43);
			border-radius: 45rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top: 20rpx;
		}
	}

	/deep/.u-mode-center-box{
        background-color: transparent;
    }

	.popone{
        width: 100%;
        background: #FFFFFF;
        border-radius: 30rpx;
        // height: 530rpx;
        .bg{
            position: absolute;
            width: 100%;
            height: 300rpx;
            border-radius: 30rpx 30rpx 0 0 ;
        }
        .icon_gbcha{
            width: 40rpx;
            height: 40rpx;
            margin-left: auto;
            position: absolute;
            right: 30rpx;
            top: 30rpx;
        }
        .yuedu{
            height: 80rpx;
            display: flex;
            padding: 0 30rpx;
            align-items: center;
            .icon_xz_n{
                width: 36rpx;
                height: 36rpx;
                margin-right: 8rpx;
            }
            .xy{
                font-weight: 500;
                font-size: 20rpx;
                color: #999999;
                display: block;
                width: 90%;
            }
            .xyhu{
                color: rgba(234, 89, 24, 1);
            }
        }
        .kaolv{
            font-weight: bold;
            font-size: 28rpx;
            color: #666666;
            display: block;
            text-align: center;
            margin-top: 20rpx;
        }
        .phonenav{
            position: relative;
            // margin: 30rpx;
            display: flex;
            flex-direction: column;
            // justify-content: center;
            align-items: center;
            padding: 40rpx 20rpx;
            .img_aq{
                width: 173rpx;
                height: 211rpx;
                margin-bottom: 20rpx;
            }
            .jiename{
                font-weight: bold;
                font-size: 36rpx;
                color: #111111;
            }
            .queren{
                font-weight: 400;
                font-size: 24rpx;
                color: #666666;
                display: block;
                margin: 40rpx 0 80rpx;
            }
            .chaka{
                padding: 30rpx;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: #F6F7F9;
                border-radius: 16rpx;
                margin: 25rpx 0;
                .chaname{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #111111;
                }
                .phonenum{
                    display: block;
                    font-weight: bold;
                    font-size: 50rpx;
                    color: #F06047;
                    margin: 10rpx 0;
                }
                .xiugai{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    .noben{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #666666;
                    }
                    .xiu{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #F06047;
                        display: inline-block;
                        margin-left: 6rpx;
                    }
                }
            }
            .dianbtn{
                height: 90rpx;
                background: linear-gradient(90deg, #FF8F39, #FF4D43);
                border-radius: 45rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                margin-top: 20rpx;
                .bm{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #FFFFFF;
                }
                .bmmaio{
                    font-weight: 500;
                    font-size: 20rpx;
                    color: #FFFFFF;
                }
            }
            .bzhang{
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-top: 30rpx;
                .icon_ts{
                    margin-right: 6rpx;
                    width: 24rpx;
                    height: 24rpx;
                }
                .zhiname{
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #F06047;
                }
            }
        }
    }
	.queli{
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 40rpx 0rpx 70rpx;
		justify-content: center;
		align-items: center;
        .queitem{
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
			margin-bottom: 20rpx;
			justify-content: center;
            .icon_xz_s{
                margin-right: 15rpx;
                width: 36rpx;
                height: 36rpx;
            }
            text{
                font-weight: 500;
                font-size: 28rpx;
                color: #111111;
				max-width: 80%;
            }
        }
    }
</style>
